<template>
  <div id="Newlines" style="width: 630px; height: 280px;"></div>
</template>
<script setup>
import { onMounted } from "vue";
import * as echarts from 'echarts';
import adminApi from "../../apis/admin";
const DrawEcharts = (ArrayList,Res) => {
  var chartDom = document.getElementById('Newlines');
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    title: {
      text: '销售数额趋势图', // 标题文本
      left: 'center', // 标题位置
    },
    xAxis: {
      type: 'category',
      data: ArrayList,

    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          color: 'black' // 将x轴网格线的颜色设置为黑色
        }
      }
    },
    series: [
      {
        data: Res,
        type: 'line',
        label: {
          show: true,
          formatter: '{c}', // 显示数据值
        },
      }
    ]
  };

  option && myChart.setOption(option);

}
const GetAllPaymentData = async () => {
  try {
    const res =await adminApi.getPaymentData();
    var ArrayList = new Array();
    ArrayList.push('最低销售额');
    ArrayList.push('平均销售额');
    ArrayList.push('最高销售额');
    ArrayList.push('总销售额');
    console.log(ArrayList);
    console.log(res);
    DrawEcharts(ArrayList,res);
  } catch (error) {
    console.log(error);
  }
}
onMounted(async () => {
  await GetAllPaymentData();
});
</script>

<style scoped>
</style>
